<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui table 模块，单元格事件 - 在线演示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
  ;!function(){self!==parent&&(location.href="//www.baidu.com/")}();
  </script>
  <link href="/static/libs/layui/css/layui.css" rel="stylesheet">
  <link href="/static/css/global.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo">
  <div class="layui-fluid">
    <a class="logo" href="../../index.html">
      <img src="/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>
    
    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item" data-dir="docs">
        <a href="../../docs/index.html">文档</a> 
      </li>
      <li class="layui-nav-item" data-dir="demo">
        <a href="../index.html">示例</a>
      </li>
      
      <li class="layui-nav-item">
        <a href="javascript:;">
          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
          生态
        </a>
        <dl class="layui-nav-child layui-nav-child-c">  
          
          
          
          <dd lay-unselect><a href="https://layuion.com/layer/" target="_blank">layer 组件单独版</a></dd>
        </dl>
      </li>
      
      
    </ul>
  </div>
</div>
 
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree site-demo-nav">
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">演示</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="../index.html">在线测试</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">布局</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="../grid.html">栅格</a>
      </dd>
      <dd>
        <a href="../admin.html">外框</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">基本元素</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="../button.html">按钮</a>
      </dd>
      <dd>
        <a href="../form.html">表单</a>
      </dd>
      <dd>
        <a href="../nav.html">导航 / 面包屑</a>
      </dd>
      <dd>
        <a href="../menu.html">基础菜单</a>
      </dd>
      <dd>
        <a href="../tab.html">选项卡</a>
      </dd>
      <dd>
        <a href="../progress.html">进度条</a>
      </dd>
      <dd>
        <a href="../panel.html">面板</a>
      </dd>
      <dd>
        <a href="../badge.html">徽章</a>
      </dd>
      <dd>
        <a href="../timeline.html">时间线</a>
      </dd>
      <dd>
        <a href="../table-element.html">静态表格</a>
      </dd>
      <dd>
        <a href="../anim.html">动画</a>
      </dd>
      <dd>
        <a href="../auxiliar.html">辅助元素</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">组件示例</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="../layer.html">
          弹出层
        </a>
      </dd>
      <dd>
        <a href="../laydate.html">
          日期与时间选择
        </a>
      </dd>
      <dd>
        <a href="../table.html">
          数据表格
        </a>
      </dd>
       <dd>
        <a href="../laypage.html">
          分页
        </a>
      </dd>
      <dd>
        <a href="../upload.html">
          上传
        </a>
      </dd>
      <dd>
        <a href="../dropdown.html">
          下拉菜单
        </a>
      </dd>
      <dd>
        <a href="../transfer.html">
          穿梭框
        </a>
      </dd>
      
       <dd>
        <a href="../tree.html">
          树形组件
        </a>
      </dd>
      <dd>
        <a href="../colorpicker.html">
          颜色选择器
        </a>
      </dd>
      <dd>
        <a href="../slider.html">
          滑块
        </a>
      </dd>
      <dd>
        <a href="../rate.html">
          评分
        </a>
      </dd>
      <dd>
        <a href="../carousel.html">
          轮播
        </a>
      </dd>
      <dd>
        <a href="../laytpl.html">
          模板引擎
        </a>
      </dd>
      <dd>
        <a href="../flow.html">
          流加载
        </a>
      </dd>
      <dd>
        <a href="../util.html">
          工具模块
        </a>
      </dd>
      <dd>
        <a href="../code.html">
          文本行修饰
        </a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
</ul>

    </div>
  </div>
  <style>
  body .site-demo-title,
  body .layui-layout-admin .site-demo{left: 360px}
  .layui-layout-admin .site-demo-body{top: 107px;}
  body .site-demo-code{left: 160px; width: calc(100% - 160px);}
</style>
<div class="layui-side layui-side-child">
  <div class="layui-side-scroll">
    <!-- 左侧子菜单 -->
    <ul class="layui-nav layui-nav-tree site-demo-table-nav">
      <li class="layui-nav-item">
        <a class="layui-nav-title" class="layui-nav-title" href="../table.html">
          表格综合演示
        </a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="auto.html">列宽自动分配<span class="layui-badge-dot"></span></a>
      </li>
      
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="data.html">赋值已知数据</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="static.html">转化静态表格</a>
      </li>
      
      <hr>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="resetPage.html">自定义分页</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="radio.html">开启单选框<span class="layui-badge-dot"></span></a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="cellEdit.html">双击单元格编辑</a>
      </li>
      <hr>
      
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="form.html">加入表单元素</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="style.html">设置单元格样式</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="fixed.html">固定列</a>
      </li>
      
      <hr>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="parseData.html">解析任意数据格式<span class="layui-badge-dot"></span></a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="onrow.html">行事件<span class="layui-badge-dot"></span></a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="reload.html">外部搜索</a>
      </li>
      <hr>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="initSort.html">设置初始排序</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="cellEvent.html">单元格事件</a>
      </li>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="thead.html">复杂表头</a>
      </li>
      
      <hr>
      <li class="layui-nav-item">
        <a class="layui-nav-title" href="../../docs/modules/table.html" target="_blank">更多用法见文档</a>
      </li>
    </ul>
  </div>
</div>
 
  <div class="layui-tab layui-tab-brief site-demo-table" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
      <li class="layui-this">预览</li>
      <li>查看代码</li>
      <li>帮助</li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">
      <div class="layui-tab-item layui-show">
        <div class="layui-main">
          
          <div id="LAY_preview">
 
点击下面表格中的【签名列】，以演示单元格事件
 
<table class="layui-table" lay-data="{height: 308, url:'/static/json/table/user.json'}" lay-filter="demoEvent">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sign', width:'50%', event: 'setSign', style:'cursor: pointer;'}">签名</th>
      <th lay-data="{field:'experience'}">积分</th>
      <th lay-data="{field:'score'}">评分</th>
    </tr>
  </thead>
</table> 
               
          </div>
          <div style="padding: 32px 0 75px;">
  <blockquote class="layui-elem-quote">
    更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
  </blockquote>
</div>
        </div>
      </div>
      
      
      <div class="layui-tab-item">
      </div>
      
      
      <div class="layui-tab-item">
        <div class="layui-main">
          <p></p>
          
          
          
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>相关</legend>
          </fieldset>
          <a class="layui-btn layui-btn-normal" href="../../docs/modules/table.html" target="_blank">表格模块文档</a>
        </div>
      </div>
      
        
    </div>
  </div>
  <div class="layui-footer footer footer-demo">
  <p>
    Copyright &copy; 2022 <a href="../../index.html">layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://github.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
  </p>
</div>
<script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>
 
<script src="/static/libs/layui/layui.js"></script>
<script>
layui.config({
  base: '/static/modules/'
  ,version: '27601'
}).use('global');
</script>
 

</div>
<div id="LAY_democodejs">
<script>
layui.use('table', function(){
  var table = layui.table; 
  //单元格事件
  table.on('tool(demoEvent)', function(obj){
    var data = obj.data;
    if(obj.event === 'setSign'){
      layer.prompt({
        formType: 2
        ,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
        ,value: data.sign
      }, function(value, index){
        layer.close(index);
        
        //这里一般是发送修改的Ajax请求
        
        //同步更新表格和缓存对应的值
        obj.update({
          sign: value
        });
      });
    }
  });
});
</script>
</div>
</body>
</html>